<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/area.js" ></script>
		<title></title>
		<style>
			
		.aButton {
			background-color:#0099CC;
			border:none;
			border-radius: 4px;
			width: 60px;
			height: 25px;
			color:#ffffff;
			margin-left:12px;
			font-size: 12px;
			-webkit-transition: all .3s ease-in;
			border:1px solid #fff;
		}
		body{
		background: #FFFFFF;
		}
		</style>
		<script>
		var shengjiArr = new Array();//省级动态数组
		var shiji='';
		var shengjitongjiold;
		var shijiArr = new Array();//市级动态数组
			function goBackChinaMap(){
				$('#china_map').css('display','block');
        		$('#city_map').css('display','none');
				$('#proe_map').css('display','none');
			}
			function goBackProeMap(){
				$('#china_map').css('display','none');
        		$('#city_map').css('display','none');
				$('#proe_map').css('display','block');
			}
			function getsheng(){
			var v = {};
			v["map.sheng"] = "广西";
			$.ajax({
				type : 'POST' ,
				url : '/GX_IRAP/page/bi/map/XZSP_SC_getmapinfo' ,
				data : v ,
				dataType : "json" ,
				async : false ,//同步才能加载数据
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					if (response.status) {
					
						console.log(response.content);
						
						shengjitongjiold=response.content;
						
						for (var i = 0; i < shengjitongjiold.length; i++) {    
                           shengjiArr.push({"name":shengjitongjiold[i].CITY_NAME,"value": shengjitongjiold[i].VALUE,"CITYSORT": shengjitongjiold[i].CITY_ID});//存入    
                           }   
						
						console.log(shengjiArr);
						
					} else {
						alert("获取省级统计失败！");
					}
				} ,
				error : function(response, status, statusText) {
				} ,
				complete : function(response, status, statusText) {
				}
			});
			}
			function getshi(){
			var v = {};
			v["map.shiji"] = shiji;
			$.ajax({
				type : 'POST' ,
				url : '/GX_IRAP/page/bi/map/XZSP_SC_getshimapinfo' ,
				data : v ,
				dataType : "json" ,
				async : false ,//同步才能加载数据
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					if (response.status) {
					
						console.log(response.content);
						var shengjitongjiold1;
						shengjitongjiold1=response.content;
						shijiArr.length=0;
						for (var i = 0; i < shengjitongjiold1.length; i++) {
							if(shengjitongjiold1[i].VALUE==undefined){
								
							}else{
                           shijiArr.push({"name":shengjitongjiold1[i].CITY_NAME,"value": shengjitongjiold1[i].VALUE});//存入    
							}
							}   
						console.log(shijiArr);
					} else {
					    console.log("获取市级统计失败！");
					}
				} ,
				error : function(response, status, statusText) {
				} ,
				complete : function(response, status, statusText) {
				}
			});
			}
		</script>
	</head>
	<body onload="setcity()" style="overflow: hidden;">
		
		<div id="main" style="height:500px;width:480px;margin:5px auto;position: relative;">
			<div id="china_map" style="width:480px;height:550px;margin:0 auto;position: absolute;top:10px;left:1px;display: block;"></div>
			<div id="proe_map" style="width:480px;height:550px;margin:0 auto;position: absolute;top:10px;left:1px;display: none;"></div>
			<div id="city_map" style="width:480px;height:550px;margin:0 auto;position: absolute;top:10px;left:1px;display: none;"></div>
			 
			<div class="retPro" style="z-index:999;position: absolute;top:50px;left:10px;display: block;">
						<a href="javascript:void(0);" onclick="goBackChinaMap()" class="aButton" style="height:30px;line-height: 30px;border:1px solid #ccc;padding:8px 10px;margin-left:20px;border-radius:5px;cursor: pointer;text-decoration:none;">
							返回本省
						</a>
			</div>
		</div>
			
		<script>
		var test=0;
		   
			$().ready(function(){
			 /*echarts*/
			 //获取下钻数据 
				getsheng();
				   $.get('json/gx/gx.json', function (mapJson) {
				   		echarts.registerMap('广西', mapJson);
					    var chart = echarts.init(document.getElementById('china_map'));//在id为mainMap的dom元素中显示地图
					  	chart.setOption({
					        tooltip: {
					            trigger: 'item',
					            formatter: function(data){
	                                if( !isNaN(data.value) ){
	                                    return data.name+"<br />获证企业数："+data.value+"家";
	                                }
	                            }
					            //formatter: function (result){//回调函数，参数params具体格式参加官方API
					            //   return result.name+'<br />数据:'+result.value;
					            //} 
					        },
					       /*  dataRange:{  
				               	min:0,  
				               	max:1000,  
				               	splitNumber:0,
				              	text:['高','低'],  
				                realtime:false,
				               	calculable:false,
				               	selectedMode:false,
				               	realtime:false,
				               	show:true,
				               	itemWidth:18,
				               	itemHeight:100,
				               	color: ['#E0022B', '#E09107', '#A3E00B'],
				            },  */
				            dataRange: {
				                x: 'left',
				                y: 'bottom',
				                splitList: [
				                    {start: 2000},
				                    {start: 1000, end: 2000},
				                    {start: 500, end: 1000},
				                    {start: 300, end: 500},
				                    {start: 200, end: 300},
				                    {start: 100, end: 200},
// 				                    {start: 10, end: 200, label: '10 到 200（自定义label）'},
// 				                    {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
				                    {start: 1, end: 100},
				                    {start: 0, end: 1},
				                ],
				                color: ['#E0022B', '#E09107', '#E3FFFF']
				            },
							title:{
						        text:'',
						        //subtext:'',
						        x:'center',
						        y:'top',
						        textAlign:'left'
						    },
					        series: [{
					            type: 'map',
					            map: '广西',//要和echarts.registerMap（）中第一个参数一致
					            scaleLimit: { min: 0.8, max: 1.9 },//缩放
					             mapLocation:{  
			                        y:60  
			                    },  
			                    itemSytle:{  
			                        emphasis:{label:{show:false}}  
			                    }, 
					            label: {
					                normal: {
					                    show: true
					                },
					                emphasis: {
					                    show: true
					                }
					            },
					            data : shengjiArr//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
					        }]
					    }),
					    
					    chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方API
					    		console.log(result);
					    		setTimeout(function () {
        									$('#china_map').css('display','none');
        									$('#city_map').css('display','none');
					       					$('#proe_map').css('display','block');
					       			}, 500);
					       	//选择市的单击事件 
					       	var selectProe = result.name;
					       	for(var i=0;i<shengjiArr.length;i++){
					       	  if(shengjiArr[i].name==selectProe){
					       		shiji = shengjiArr[i].CITYSORT;
					       	  }
					       	}
					       	console.log(shengjiArr);
					       	//alert(selectProe+":"+shiji);
					       	//获取下钻数据 
					       	getshi();
					       	//    调取后台数据
							//alert(area_data[selectProe])
						   	var url=encodeURI('json/gx/'+area_data[selectProe]+'.json');
							$.get(url, function (Citymap) {
							  		echarts.registerMap(selectProe, Citymap);
							  		var myChartProe = echarts.init(document.getElementById('proe_map'));
							  		myChartProe.setOption({
								        tooltip: {
								            trigger: 'item',
								            formatter: function(data){
				                                //console.log(data);
				                                if( !isNaN(data.value) ){
				                                    return data.name+"<br />获证企业数："+data.value+"家";
				                                }
				                            }
								            //formatter: function loadData(result){//省级回调函数，参数params具体格式参加官方API
								            //    return result.name+'<br />违规数:'+result.value;
								            //} 
								        },
								       /*  dataRange:{  
							                min:0,  
							                max:1500,  
							                text:['高','低'],  
							                realtime:false,
							                splitNumber:0,
							               	itemWidth:18,
							               	itemHeight:100,
							               	color: ['#E0022B', '#E09107', '#A3E00B'],
							               	calculable : false
							               	
							            },  */
							            dataRange: {
							                x: 'left',
							                y: 'bottom',
							                splitList: [
							                    {start: 1000},
							                    {start: 800, end: 1000},
							                    {start: 500, end: 800},
							                    {start: 300, end: 500},
							                    {start: 200, end: 300},
							                    {start: 100, end: 200},
//			 				                    {start: 10, end: 200, label: '10 到 200（自定义label）'},
//			 				                    {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
							                    {start: 1, end: 100},
							                    {start: 0, end: 1},
							                ],
							                color: ['#E0022B', '#E09107', '#E3FFFF']
							            },
										title:{
									        text:selectProe+'数据总览',
									        //subtext:'',
									        x:'center',
									        y:'top',
									        textAlign:'left'
									    },
								        series: [{
								            type: 'map',
								            map: selectProe ,//要和echarts.registerMap（）中第一个参数一致
								            scaleLimit: { min: 0.8, max: 1.9 },//缩放
								             mapLocation:{  
						                        y:60  
						                    },  
						                    itemSytle:{  
						                        emphasis:{label:{show:false}}  
						                    }, 
								            label: {
								                normal: {
								                    show: true
								                },
								                emphasis: {
								                    show: true
								                }
								            },
								            data :shijiArr
								             //[{name:'青秀区',value:'5'},    
						                     // {name:'兴宁区',value:'15'}]
						                        //dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
								        }]
								    })
							  		
						       		
										  		myChartProe.on('click',function(rel){
										  			setTimeout(function () { 
			        									//$('#cont_pro_map').css('display','block');
								       					//$('#cont_city_map').css('display','none');
			    									}, 500);
										  			
										  		})
										  	
											
									
							  	});
								
							});
						});
					});
		function setcity(){
		
		 }   
		//}
		</script>
	</body>
</html>
